<template>
    <div class="easyd-weixin-Box">

        <div class="nav_list">
            <ul v-if="$route.query.type == '0'">
            	<li @click="navListActiveBtn('2')" :class="navListActive == '2' ? 'active' : ''">销售技巧<span></span></li>
                <li @click="navListActiveBtn('0')" :class="navListActive == '0' ? 'active' : ''">行业知识<span></span></li>
                <li @click="navListActiveBtn('1')" :class="navListActive == '1' ? 'active' : ''">产品知识<span></span></li>
            </ul>
            <ul v-else>
            	<li @click="navListActiveBtn('2')" :class="navListActive == '2' ? 'active' : ''">销售技巧<span></span></li>
                <li @click="navListActiveBtn('1')" :class="navListActive == '1' ? 'active' : ''">产品知识<span></span></li>
                <li @click="navListActiveBtn('0')" :class="navListActive == '0' ? 'active' : ''">行业知识<span></span></li>
            </ul>
        </div>
        <div class="app_page_box" style="top: 40px;">
            <div class="app_page">
                <div class="salesEssential_pool_list app_box_content_list app_list_box MARGIN_BOTTOM_5" v-for="(item,index) in salesData" @click="gosalesEssentialDetail(item)">
                    <div class="salesEssential_pool_info">
                        <div class="app_box_flex">
                            <div class="app_box_content_left">
                                {{item.sk_title || '暂无标题'}}
                            </div>
                        </div>
                    </div>
                    <div class="salesEssential_pool_time C4 T3" v-if="$route.query.type == '1'">
                    	<ul>
                    		<li style="line-height: 20px;" v-for="(cItem,index) in item.newContent" v-if="cItem.type=='0' && index == '0'" v-html="cItem.txt.substring(0,70)+'...'"></li>
                    	</ul>
                    </div>
                    <div class="salesEssential_pool_time C2 T3">
                        <span class="app_float_left">更新时间：{{$common.getTimes(item.sk_create_time,'cn')}}</span>
                        <span class="app_float_right C4">{{feedbackTypeArr[item.sk_type]}}</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {mapState, mapMutations} from "vuex";

    export default {

        data() {
            return {
				feedbackTypeArr: ['行业知识', '产品知识',  '销售技巧'], //反馈类型
                navListActive: '0', //顶部菜单选中
            };
        },
        computed: {
            ...mapState({
                salesData: state => state.SalesEssentialModule.sales,
            }),
        },
        mounted() {
        	
        	if(this.$route.query.type == '1'){
        		document.title = '百问百答'
        	}else{
        		document.title = '专业培训'
        	}
        	
        	
            if(sessionStorage.getItem('navListActive') == 1){
                this.navListActiveBtn('1')
            }else if(sessionStorage.getItem('navListActive') == 2){
                this.navListActiveBtn('2')
            }else{
            	this.navListActiveBtn('0')
            }
        },
        methods: {

            //  ...mapMutations(["ShopIndexModule/updateIsShopGuide"]),
            
            //顶部菜单选中
            navListActiveBtn(e) {
            	sessionStorage.setItem('navListActive',e)
                this.navListActive = e;
                this.initData(e);
            },
            initData(type) {
            	
                this.$easyUtil.startLoading(this);
                this.$http.getHttp(
                    this.$API.knowledgeBaseList + "/sk_type/"+type + "/sk_category/"+this.$route.query.type,
                    rs => {
                        this.$easyUtil.endLoading(this);
                        console.log(rs);
                        for(var ss=0;ss<rs.knowledgeInfo.length;ss++){
                        	rs.knowledgeInfo[ss].newContent = JSON.parse(rs.knowledgeInfo[ss].sk_content) 
                        }
                        this.$store.commit("SalesEssentialModule/updateSalesData", rs.knowledgeInfo);
                    }
                );
            },
            gosalesEssentialDetail(item){
                this.$easyUtil.GO(this, '/salesEssentialDetail',{sk_id:item.sk_id})
            },
        },

    };
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
    .search_box {
        line-height: 40px;
        background: #fff;
        margin-bottom: 5px;
        text-align: center;
        display: flex;
        align-items: center;
    }

    .search_box .screen {
        flex: 1;
    }

    .search_box input {
        flex: 3;
        border-radius: 100px;
        border: 0;
        background: #f4f4f4;
        padding: 5px 10px;
    }

    .search_box .search {
        flex: 1;
        color: #FBD415;
    }

    .nav_list {
        line-height: 40px;
        background: #fff;
    }

    .nav_list ul {
        display: flex;
    }

    .nav_list ul li {
        flex: 1;
        text-align: center;
        list-style: none;
        position: relative;
    }

    .nav_list ul li span {
        position: absolute;
        bottom: 0;
        background: #fff;
        width: 50%;
        left: 25%;
        height: 1px;
    }

    .nav_list ul li.active {
        color: #FBD415;
    }

    .nav_list ul li.active span {
        background: #FBD415;
    }

    .salesEssential_pool_list {
        overflow: hidden;
    }

    .salesEssential_pool_list .salesEssential_pool_info {
        float: initial;
    }

    .salesEssential_pool_list .salesEssential_pool_time {
        overflow: hidden;
        width: 100%;
    }

    .salesEssential_pool_list .salesEssential_pool_time .app_float_right {
    	color: #fbd415;
    }

    .salesEssential_pool_list .txt_img {
        display: block;
        height: 40px;
        width: 40px;
        margin: 10px;
        margin-left: 0;
        text-align: center;
        line-height: 40px;
        background: #000;
        color: gold;
        float: left;
        border-radius: 100px;
        object-fit: cover;
    }

    .salesEssential_pool_list img {
        display: block;
        height: 50px;
        width: 70px;
        padding: 5px 10px 5px 0;
        float: left;
        object-fit: cover;
    }
</style>